<!--
 * @Description: 
 * @Author: ouyaping
 * @Date: 2023-04-11 14:31:15
 * @LastEditors: ouyaping
 * @LastEditTime: 2023-04-14 12:51:18
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <title>alg video</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 20px;
        }
        .btn {
            margin-right: 15px;
        }
        .btn p {
            padding: 5px 10px;
            font-size: 18px;
            border-radius: 3px;
            background: #3055C1;
            color: #FFFFFF;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .alg-debug {
            width: 420px;
            height: 800px;
        }
        .alg-debug iframe {
            width: 500px;
            height: 900px;
            border: none;
            border-radius: 3px;
        }
        .lists {
            margin-left: 15px;
            flex: 1;
            width: 50%;
            max-width: 50%;
        }
        .lists div {
            width: 100%;
            margin-bottom: 15px;
            word-wrap:break-word;
        }
    </style>

    <script src="./js/axios.js" type="text/javascript"></script>

    <script type="text/javascript">
        
        let timer
        const getList = (val) => {
            timer = setInterval(() => {
                axios.get('http://127.0.0.1:3001/list').then((res) => {
                    
                    if(res.data) {
                        
                        const dom = document.getElementById('lists')
                        dom.innerHTML = `
                            <h3>ReportProfessionalJointLoadData: </h3>   
                            <div>${JSON.stringify(res.data.ReportProfessionalJointLoadData)}</div>
                            <h3>ReportProfessionalRunningPostureJoints: </h3>   
                            <div>${JSON.stringify(res.data.ReportProfessionalRunningPostureJoints)}</div>
                            <h3>ReportProfessionalRunningPostureRealTimeData: </h3>   
                            <div>${JSON.stringify(res.data.ReportProfessionalRunningPostureRealTimeData)}</div>
                            <h3>ReportProfessionalRunningPostureResultData: </h3>   
                            <div>${JSON.stringify(res.data.ReportProfessionalRunningPostureResultData)}</div>
                        `
                    }
                    if(val) {
                        clearInterval(timer)
                    }
                })
            }, 1000)
        }
        window.addEventListener('click', (e) => {
            if(e.target.className === 'startAlg') {
                axios.get('http://127.0.0.1:3001/')
                document.getElementById('iframe').style.display = 'none'
                setTimeout(() => {
                    document.getElementById('iframe').style.display = 'block'
                    getList()
                })
            }
            if(e.target.className === 'endAlg') {
                axios.get('http://127.0.0.1:3001/end')
                clearInterval(timer)
            }
            if(e.target.className === 'getResult') {
                getList(true)
            }
        })
    </script>
</head>
<body>
    <div id="app">
        <div class="btn">
            <p class="startAlg">开启算法</p>
            <p class="endAlg">关闭算法</p>
            <p class="getResult">获取报告</p>
        </div>
        <div class="lists" id="lists"></div>
        <div class="alg-debug">
            <iframe id="iframe" src="http://192.168.0.119:8080/color" />
            <!-- <iframe id="iframe"  src="https://cn.vuejs.org/" /> -->
        </div>
    </div>
</body>

</html>